<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>掘金</title>
    <link rel="stylesheet" href="../../iconfont/iconfont.css">
    <link rel="stylesheet" href="./css/1.body.css">
    <link rel="stylesheet" href="./css/2.header.css">
    <link rel="stylesheet" href="./css/3.nav.css">
    <link rel="stylesheet" href="./css/4.main.css">
    <link rel="stylesheet" href="./css/5.aside.css">
    <link rel="stylesheet" href="./css/6.mainHeader.css">
    <link rel="stylesheet" href="./css/7.mainUl.css">
    <script src="./js/template-web.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.0.0-alpha.1/axios.min.js"></script>
</head>
<body>
    <!-- 此盒子包含header和nav -->
    <div class="header-and-nav">
        <header id="body-header">
            <!-- 图标 -->
            <div class="header-logo">
                <img src="./img/1.logo.svg" alt="" id="header-logo">
            </div>
            <!-- 图标旁边列表 -->
            <div class="header-list">
                <ul>
                    <li><a style="color: #007fff;">首页</a></li>
                    <li class="disappearSecond"><a>沸点</a></li>
                    <li class="disappearSecond"><a>课程</a></li>
                    <li class="disappearSecond"><a>直播</a></li>
                    <li class="disappearSecond"><a>活动</a></li>
                    <li class="disappearSecond"><a>商城</a></li>
                    <li class="disappearFirst"><a>APP</a></li>
                    <li class="disappearFirst"><a>插件</a></li>
                </ul>
            </div>
            <!-- 首页下拉列表 -->
            <div class="header-list-lis" style="display: none;">
                <ul>
                    <li><a style="color: #007fff;">首页</a></li>
                    <li><a>沸点</a></li>
                    <li><a>课程</a></li>
                    <li><a>直播</a></li>
                    <li><a>活动</a></li>
                    <li><a>商城</a></li>
                </ul>
            </div>
            <div class="iconfont icon-down_s header-list-lis-arrow"></div>
            <!-- 登录框按钮 -->
            <div class="header-login">
                <button>登录</button>
            </div>
            <!-- 会员 -->
            <div class="header-vip">
                <img src="./img/2.vip.svg" alt="">
                <div id="header-vip">会员</div>
            </div>
            <!-- 创作者中心下拉列表 -->
            <div class="header-creation-list" style="display:none">
                <ul>
                    <li class="iconfont icon-edit">&nbsp&nbsp&nbsp写文章</li>
                    <li class="iconfont icon-hot">&nbsp&nbsp&nbsp发沸点</li>
                    <li class="iconfont icon-post">&nbsp&nbsp&nbsp写代码</li>
                </ul>
            </div>
            <!-- move盒子包含创作者中心和搜索框 -->
            <div class="moveFather">
                <div class="moveChild">
                    <!-- 搜索框 -->
                    <form class="header-search">
                        <input type="text" placeholder="探索稀土掘金">
                        <button id="header-search-btn" class="iconfont icon-search"></button>
                    </form>
                    <!-- 创作者中心 -->
                    <div class="header-creation">
                        <button id="header-creation-leftBtn">创作者中心</button>
                        <button id="header-creation-rightBtn" class="iconfont icon-down_s"></button>
                    </div>
                </div>
            </div>
        </header>
        <script src="./js/1.header.js"></script>
    
        <nav>
            <ul class="nav-mainUl" data-index="0">
                <li style="color: #007fff">综合</li>
                <li>后端</li>
                <li>前端</li>
                <li>Android</li>
                <li>iOS</li>
                <li>人工智能</li>
                <li>开发工具</li>
                <li>代码人生</li>
                <li>阅读</li>
            </ul>
            <!-- 以下每个ul代表一个下拉列表 -->
            <ul class="nav-ChildUl ChildUl-backend">
            </ul>
            <ul class="nav-ChildUl ChildUl-frontend">
            </ul>
            <ul class="nav-ChildUl ChildUl-Android">
            </ul>
            <ul class="nav-ChildUl ChildUl-iOS">
            </ul>
            <ul class="nav-ChildUl ChildUl-ai">
            </ul>
            <ul class="nav-ChildUl ChildUl-freebie">
            </ul>
            <ul class="nav-ChildUl ChildUl-career">
            </ul>
            <ul class="nav-ChildUl ChildUl-article">
            </ul>
        </nav>
        <script src="./js/2.nav.js"></script>    
    </div>

    <main>
        <!-- 此盒子包含无限滚动列表和上方的导航栏（推荐|最新|热榜） -->
        <div class="main-box">
            <header id="small-header">
                <ul class="small-header-ul">
                    <li class="small-header-li"><a>推荐</a></li>
                    <li class="small-header-li"><a>最新</a></li>
                    <li class="small-header-li"><a>热榜</a></li>
                </ul>
            </header>
            <!-- 无限滚动列表 -->
            <ul class="main-ul">
                <!-- 置顶的li -->
                <li class="main-ul-li">
                    <ul class="main-ul-li-header">
                        <li class="userName">沸点小助手</li>
                        <li class="releaseDate">6天前</li>
                    </ul>
                    <a>
                        <h3 class="title">3分钟阅读挑战</h3>
                        <p class="article-first">上下班坐地铁太无聊？睡觉前只知道刷短视频？那就来参加我们的三分钟阅读挑战活动吧，随时随地掏出你的手机，打开掘金app阅读文章，留下你的学习脚印，真的不要太快乐！</p>
                        <div class="cover">
                            <img src="./img/9.ydtz.webp" alt="">
                        </div>
                        <div></div>
                    </a>
                </li>

                <!-- 其他li -->
                <!-- 定义模板 -->
                <script type="text/html" id="tpl-main-li">
                    <div class="templateBox">
                        <li class="main-ul-li">
                            <ul class="main-ul-li-header">
                                <li class="userName">{{userName}}</li>
                                <li class="releaseDate">{{releaseDate}}</li>
                                <li class="label">{{label}}</li>
                            </ul>
                            <a href="{{homepage}}">
                                <h3 class="title">{{title}}</h3>
                                {{if img=='None'}}<p class="article" style="width: 100%;">{{article}}</p>{{/if}}
                                {{if img!=='None'}}<p class="article" style="width: 78%;">{{article}}</p>{{/if}}
                                <div class="cover">
                                    {{if img!=='None'}}<img src="{{img}}" alt="">{{/if}}
                                </div>    
                            </a>
                            <ul class="main-ul-li-footer">
                                <li><div class="iconfont icon-browse"></div>&nbsp<a>2312</a></li>
                                <li><div class="iconfont icon-good"></div>&nbsp<a>231</a></li>
                                <li><div class="iconfont icon-comment"></div>&nbsp<a>32</a></li>
                            </ul>
                            <div class="iconfont icon-close main-ul-li-footer-close"></div>
                        </li>    
                    </div>
                </script>
                <script src="./js/4.art-template.js"></script>
            </ul>    
        </div>
        <!-- 侧边栏 -->
        <aside>
            <ul>
                <li class="asideLi aside-first">
                    <div class="iconfont icon-shijian" id="good"></div>
                    <div id="goto">去签到</div>
                    <p>点亮你在社区的每一天</p>
                </li>
                <div class="asideLi-fixed asideLi" >
                    <li class="asideLi imgBox">
                        <a>
                            <img src="./img/3.rxjh.webp" alt="">
                        </a>
                        <a class="imgBox-advertisement">广告</a>
                        <div class="iconfont icon-RectangleCopy imgBox-eliminate"></div>
                    </li>
                    <li class="asideLi imgBox">
                        <a>
                            <img src="./img/4.jjxc.webp" alt="">
                        </a>
                        <a class="imgBox-advertisement">广告</a>
                        <div class="iconfont icon-RectangleCopy imgBox-eliminate"></div>
                    </li>
                    <li class="asideLi aside-fourth">
                        <img src="./img/5.erweima.png" alt="">
                        <a id="first">下载稀土掘金APP</a>
                        <a id="second">一个帮助开发者成长的社区</a>
                    </li>    
                </div>
                <li class="asideLi aside-fifth">
                    <ul>
                        <li class="aside-fifth-li aside-fifth-firstLi">
                            <a class="iconfont icon-paihangbang"></a>
                            <a id="aside-fifth-author">作者榜</a>
                        </li>
                        <li class="aside-fifth-li aside-fifth-secondLi">
                            <ul>
                                <li>111111</li>
                                <li>222222</li>
                                <li>333333</li>
                            </ul>
                        </li>
                        <li class="aside-fifth-li aside-fifth-thirdLi">
                            <a>完整榜单</a>
                            <a class="iconfont icon-arrow-right"></a>
                        </li>
                    </ul>
                </li>
                <li class="asideLi aside-sixth">
                    <ul>
                        <li>
                            <a>
                                <img src="./img/6.manyouzhinan.png" alt="">
                                <a class="aside-sixth-smallA">稀土掘金漫游指南</a>
                            </a>
                        </li>
                        <li>
                            <a>
                                <img src="./img/7.liulanqichajian.png" alt="">
                                <a class="aside-sixth-smallA">安装掘金浏览器插件</a>
                            </a>
                        </li>
                        <li>
                            <a>
                                <img src="./img/8.fanyijihua.png" alt="">
                                <a class="aside-sixth-smallA">前往掘金翻译计划</a>
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </aside>
        <script src="./js/3.aside.js"></script>
        <!-- 回到顶部按钮 -->
        <div class="toTop iconfont icon-shangchuan"></div>
        <div class="toTopTips">回到顶部</div>
    </main>
    <script src="./js/5.mainUl.js"></script>
</body>
</html>